<template>
    <div>
        <div>
            <button @click="send">
                send
            </button>
            <button @click="switchDoc">
                切换文档
            </button>
            <button @click="saveDoc">
                保存文档
            </button>
        </div>
        <iframe :src="src" 
        v-if="iframeShow"
        class="iframe"
        ref="iframeRef"
         width="100%" height="100%"  
        frameborder="no"
        loading="lazy"
        allowtransparency="true"
        allowfullscreen="true"></iframe>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted,onBeforeUnmount } from 'vue'
import { onMessage, emitMessage, removeEventListener } from './messageUtil'
const src = ref('')
const iframeRef = ref(null);
const iframeShow = ref(false);

const initSrc = () => {
    src.value = 'http://localhost:18088?wordDocId=1956243884823605248'
        iframeShow.value = true

}
const switchDoc=()=>{
    src.value = 'http://localhost:18088?wordDocId=1952184507530563584'
    iframeShow.value = false
    setTimeout(()=>{
        iframeShow.value = true
    })
}
onMounted(() => {
    initSrc();
    initEventListener();
})
//  组件销毁时，清理事件监听
// onBeforeUnmount(()=>{
//     removeEventListener();
// })
function initEventListener(){
    onMessage((data) => {
        console.log('接收 word 报告发送的 事件', data)
        switch(data.type){
            case 'saveWord':
                console.log('saveWord', data)
                break;
                default:
                    console.log('未知事件', data)
                    break;
        }
    })
}
function send(){
    emitMessage({
        type:'openWord',
        data:{
            id:'1',
            title:'测试文档1 标题',
        }
    },iframeRef.value)
}
function saveDoc(){
    emitMessage({   
        type:'saveDoc',
        data:{
            // id:'1',
            // title:'测试文档1 标题',
        }
    },iframeRef.value)
}


</script>
<style scoped>
.iframe{
    width: 100%;
    height: 500px;
}
</style>
